<template>
    <div class="blog-category-container">
        <h2>文章分类</h2>
        <RightList :list="rightListCom" @select="handleSelect"/>
    </div>
</template>
<script setup lang="ts">
import { PropType, computed, ref } from "vue";
import { TypeApiBlogCategoryI } from "~@/api/apiTypes";
import { RightListItemInter } from "~@/views/blog/rightList/types";
import RightList from "../rightList/RightList.vue";
//#region defineXxx
defineOptions({
    name: "BlogCategory",
});

const categoryIdModel = defineModel('categoryId',{type:Number})



const props = defineProps({
    categoryList: {
        type: Array as PropType<TypeApiBlogCategoryI[]>,
        default: [],
    },
    categoryId: {
        type: Number,
        default: -1,
    },
});

const emit = defineEmits<{
    select: [itemId: number | string];
}>();
//#endregion

const rightListCom = computed<RightListItemInter[]>(() => {
    const total = props.categoryList.reduce((previousValue, currentItem) => {
        return previousValue + currentItem.articleCount;
    }, 0);

    const allCategories = [
        {
            name: "全部",
            id: -1,
            articleCount: total,
            order: -1,
        },
        ...props.categoryList,
    ];
    const resultList = allCategories.map((e) => ({
        ...e,
        isSelected: e.id === props.categoryId,
        aside: `${e.articleCount}篇`,
    }));
    return resultList;
});

const handleSelect=(item:RightListItemInter)=>{
    // emit('select',itemId);

    console.log('item',item);
    
    categoryIdModel.value=new Number(item.id).valueOf();
}


</script>
<style lang="less" scoped>
.blog-category-container {
    width: 180px;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
    height: 100%;
    overflow-y: auto;
    // border: 1px solid red;
    h2 {
        font-weight: bold;
        letter-spacing: 2px;
        font-size: 1em;
        margin: 0;
    }
}
</style>
